<!--  -->
<template>
  <div class="img-box-con">
    <img :src="dataUrl" class="img-box"/>
  </div>
</template>

<script>
import {addWatermark} from './../../utils/addWatermark'
import * as IS from './../../utils/is'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'imgBox',
  components: {},
  props: {
    url: { type: String },
    setEvent: { type: Function },
    isShowWatermark:{type:Boolean, default:true}, // 是否显示水印 默认：true
  },
  data() {
    // 这里存放数据
    return {
        dataUrl: "",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    url: {
      handler(val_) {
        const val = val_
        const {$watermarkConfig} = this
        // console.log('imgBox 0=====>',val);
        if (IS.isString(val)) {
         this.isShowWatermark === true && (addWatermark(val,this,$watermarkConfig).then((res) => {
            this.dataUrl = res.url;
          })) || (this.dataUrl = val)
        }
        if(IS.isObject(val)){
          this.isShowWatermark === true && (addWatermark(val.url,this,$watermarkConfig).then((res) => {
                this.dataUrl = res.url;
            })) || (this.dataUrl = val.url)
        }

      },
      deep: true,
      immediate: true,
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {},
  }
</script>
<style lang='less' scoped>
.img-box-con{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}
</style>